<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2023-05-22 10:55:52
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2023-09-23 16:00:58
 * @FilePath: \admin_vue\src\views\T9.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->

<template>
    <div>
    <div id="global_trace_content">

    </div>
    <canvas id="canvas"></canvas>
</div>
</template>
<script>
import { DataSet, Network } from 'vis'
import { particle, destroyedParticle } from '../utils/mouse'

const computer = require('../assets/imgs/computer.png')
const wifi = require('../assets/imgs/wifi.png')
const phone = require('../assets/imgs/phone.png')
const virtual = require('../assets/imgs/virtual.png')
const ipad = require('../assets/imgs/ipad.png')

export default {
    name: 'T7',
    data() {
        return {

        }
    },
    methods: {
        globalTrace() {
            // create an array with nodes
            let nodes = new DataSet([
                {
                    id: '1',
                    label: 'Node 1',
                    shape: 'image',
                    image: computer,
                },
                {
                    id: '2',
                    label: 'Node 2',
                    shape: 'image',
                    image: wifi,
                },
                {
                    id: '3',
                    label: 'Node 3',
                    shape: 'image',
                    image: phone,
                },
                {
                    id: '4',
                    label: 'Node 4',
                    shape: 'image',
                    image: virtual,
                },
                {
                    id: '5',
                    label: 'Node 5',
                    shape: 'image',
                    image: ipad,
                },
            ])
            // create an array with edges
            let edges = new DataSet([
                {
                    id: '1',
                    from: '1',
                    to: '2',
                },
                {
                    id: '2',
                    from: '1',
                    to: '3',
                },
                {
                    id: '3',
                    from: '2',
                    to: '4',
                },
                {
                    id: '4',
                    from: '2',
                    to: '5',
                },
            ])
            // create a network
            let container = document.querySelector('#global_trace_content')
            // provide the data in the vis format
            let data = {
                nodes,
                edges,
            }
            // let options = {
            //     nodes: {
            //         shape: 'image',
            //         image: '/img/R.e366e108.png',
            //         scaling: {
            //             max: 20,
            //             min: 10,
            //         },
            //     },
            // }
            //     let options = {
      	// // 节点样式
            //         nodes: {
            //             shape: 'ellipse', // 设置节点node样式为矩形
            //             fixed: true, // 节点node固定不可移动
            //             font: {
            //                 color: 'white', // 字体的颜色
            //                 size: 30, // 显示字体大小
            //   },
            //             scaling: {
            //                 min: 16,
            //                 max: 32, // 缩放效果比例
            //   },
            //         },
            //         // 连接线的样式
            //         edges: {
            //             color: {
            //                 color: 'rgb(97, 168, 224)',
            //                 highlight: 'rgb(97, 168, 224)',
            //                 hover: 'green',
            //                 inherit: 'from',
            //                 opacity: 1.0,
            //             },
            //             font: {
            //                 align: 'top', // 连接线文字位置
            //             },
            //             smooth: true, // 是否显示方向箭头
            //             arrows: { to: true }, // 箭头指向from节点
            //         },
            //         layout: {
            //             // 以分层方式定位节点
            //             hierarchical: {
            //                 direction: 'LR', // 分层排序方向
            //                 sortMethod: 'directed', // 分层排序方法
            //                 levelSeparation: 400, // 不同级别之间的距离
            //             },
            //         },
            //         interaction: {
            //             navigationButtons: true,
            //             // hover: true, //鼠标移过后加粗该节点和连接线
            //             selectConnectedEdges: false, // 选择节点后是否显示连接线
            //         },

            //     }
            // initialize your network!
            this.network = new Network(container, data, {})
            this.network.on('click', e => this.showDetail(e))// 单击事件
            this.network.on('doubleClick', e => this.enterService(e))// 双击事件
        },
    },
    mounted() {
        this.globalTrace()
        particle(document.getElementById('canvas'))
    },
    destroyed() {
        destroyedParticle()
    },
}
</script>
<style scoped>
#global_trace_content{
    height: 100vh;
    width: 100%;
}
#canvas {
    z-index: 999;
}
</style>